import { FASTAccordionItem, FASTButton, FASTDesignSystemProvider, FASTTextField, FASTTreeItem, FASTTreeView } from "@microsoft/fast-components";
import ws from 'ws';
import { GameObjectData, InspectorData } from '../src/typings';
import * as fs from 'fs'
/*
 * Ensure that tree-shaking doesn't remove these components from the bundle.
 * There are multiple ways to prevent tree shaking, of which this is one.
 */
FASTDesignSystemProvider;
FASTButton;

class HierarchyPanel {

    updateHierarchyPanel(result: GameObjectData) {
        const treeView = document.getElementById('hierarchyTreeView') as FASTTreeView;
        treeView.innerHTML = '';
        // treeView.onselectstart = (event) => {
        //     console.log(event)
        // }
        function createTreeItem(obj: GameObjectData, parent: HTMLElement) {

            const item = new FASTTreeItem();
            item.innerText = obj.name;
            item.onclick = (e) => {
                // e.stopImmediatePropagation();
                e.stopPropagation()
                console.log('我要选中', obj.uuid)

                runtimeContext.sendCommand({
                    type: 'selectGameObject',
                    uuid: obj.uuid
                })
                //websocket.send({'select','uuid'})
            }
            item.oncontextmenu = (e) => {
                e.stopPropagation();
                console.log("右键点击", obj.uuid);
                runtimeContext.sendCommand({
                    type: 'deleteGameObject',
                    uuid: obj.uuid
                })
            }
            parent.appendChild(item)
            for (const childObject of obj.children) {
                createTreeItem(childObject, item);
            }
        }
        // const obj = this.getInspectorData(1);
        createTreeItem(result, treeView);
    }

    initialize() {
        return this;
    }
}


class InspectorPanel {

    updateInspectorPanel(result: InspectorData) {
        const inspectorView = document.getElementById('inspectorAccordion') as FASTTreeView;
        console.log('inspectordata', result)

        inspectorView.innerHTML = '';

        for (let obj of result) {
            const item = new FASTAccordionItem();
            const span = document.createElement('span');
            span.slot = 'heading';
            span.innerText = obj.name;
            item.appendChild(span)
            inspectorView.appendChild(item);

            for (let data of obj.properties) {
                const value = data.value;
                const textField = new FASTTextField();
                textField.appearance = 'filled';
                textField.placeholder = value;
                textField.innerText = data.key;
                textField.value = value;
                item.appendChild(textField)

                textField.onchange = (event) => {
                    const newValue = data.type === 'numberInput' ? parseFloat(textField.value) : textField.value;
                    const property = obj.properties.find(p => p.key === data.key);
                    property.value = newValue
                    console.log(obj);
                    runtimeContext.sendCommand({ type: 'updateBehaviourData', behaviourData: obj })
                }

            }
            // <fast-text-field appearance="filled" placeholder="user@email.com">Email</fast-text-field>
        }
    }

    initialize() {


        return this;
    }
}


class RuntimeContext {

    private client: ws;

    sendCommand(command) {
        console.log('发送命令', command);
        this.client.send(JSON.stringify(command));
    }

    initialize() {

        const hierarchyPanel = new HierarchyPanel().initialize();
        const inspectorPanel = new InspectorPanel().initialize();
        const server = new ws.Server({ port: 2018 });

        server.on('connection', (client) => {
            this.client = client;
            client.on('message', function incoming(messageText: string) {
                const message = JSON.parse(messageText)
                console.log('received: %s', message);

                if (message.type === 'hierarchy') {
                    const data = message.data;
                    hierarchyPanel.updateHierarchyPanel(data);
                }
                else if (message.type === 'inspector') {
                    const data = message.data;
                    inspectorPanel.updateInspectorPanel(data);
                }
                else if (message.type === 'saveScene') {
                    const data = message.content;
                    fs.writeFileSync('scene3.json', data, 'utf-8');
                }
            });
            const saveButton = document.getElementById("saveButton");
            saveButton.onclick = () => {
                this.client.send(JSON.stringify({ type: 'serializeScene' }))
            }
        });
        return this;
    }
}

const runtimeContext = new RuntimeContext();
setTimeout(async () => {

    runtimeContext.initialize();


}, 1000)




//test git